<!DOCTYPE html>
<!--
  ~ Copyright (C) 2018 guomw.Inc. All rights reserved.
  ~ 项目名称： mysite
  ~ 文件名称： desktop.html
  ~ Date：18-10-11 下午5:16
  ~ Author: guomw
  -->

<html xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

    <link href="../../resource/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"
          th:href="@{/resource/css/bootstrap.min.css?v=3.3.5}"/>
    <link href="../../resource/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"
          th:href="@{/resource/css/font-awesome.min.css?v=4.4.0}"/>
    <!-- Morris -->
    <link href="../../resource/css/plugins/morris/morris-0.4.3.min.css"
          th:href="@{/resource/css/plugins/morris/morris-0.4.3.min.css}" rel="stylesheet">
    <link href="../../resource/css/animate.min.css" rel="stylesheet" th:href="@{/resource/css/animate.min.css}"/>
    <link href="../../resource/hotui/css/style.min-1.0.8.css" th:href="@{/resource/hotui/css/style.min-1.0.8.css}"
          rel="stylesheet">
    <link href="../../resource/hotui/css/hotui.style.override.css"
          th:href="@{/resource/hotui/css/hotui.style.override.css}" rel="stylesheet"/>
    <link href="../../resource/hotui/js/plugins/datetimepick/css/daterangepicker.css"
          th:href="@{/resource/hotui/js/plugins/datetimepick/css/daterangepicker.css}" rel="stylesheet"/>

    <!--openlayers地图css-->
    <link rel="stylesheet" type="text/css" href="../../resource/openLayers/css/ol.css"
          th:href="@{/resource/openLayers/css/ol.css}"/>
    <!--树状图css-->
    <link href="../../resource/hotui/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/plugins/treeview/bootstrap-treeview.css}"/>
    <!--表格相关css-->
    <link href="../../resource/hotui/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"
          th:href="@{/resource/hotui/css/plugins/dataTables/dataTables.bootstrap.css}"/>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .map {
            width: 100%;
            height: 100%;
            background: #f6f6f4;
        }

        input[type=range] {
            -webkit-appearance: none;
            width: 300px;
            border-radius: 10px;
            /*这个属性设置使填充进度条时的图形为圆角*/
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }

        input[type=range]::-webkit-slider-runnable-track {
            height: 15px;
            border-radius: 10px;
            /*将轨道设为圆角的*/
            box-shadow: 0 1px 1px #65bdd3, inset 0 .125em .125em #127f9b;
            /*轨道内置阴影效果*/
        }

        input[type=range]:focus {
            outline: none;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 25px;
            width: 25px;
            margin-top: -5px;
            /*使滑块超出轨道部分的偏移量相等*/
            background: #08c1e6;
            border-radius: 50%;
            /*外观设置为圆形*/
            border: solid 0.125em rgba(49, 155, 187, 0.5);
            /*设置边框*/
            box-shadow: 0 .125em .125em #08c1e6;
            /*添加底部阴影*/
        }

        .dataTables_wrapper {
            padding-bottom: 0 !important;
        }

        .ol-viewport {
            /*完全透明*/
            /*background-color: rgba(0, 0, 0, 0);*/
            /*完全不透明*/
            /*background-color: rgba(0, 0, 0, 1);*/
        }

    </style>
</head>

<body class="gray-bg" style="height: 100%">
<div style="position: relative;height: 100%">
    <input id="strId" name="strId" minlength="2" type="hidden" class="form-control"
           th:value="${strId}">
    <input id="selectNo" name="selectNo" type="hidden">

    <!--地图主体-->
    <div id="map" class="map table-bordered" style="float:left;height:100%;width: 100%;">
    </div>
    <!--搜索框-->
    <div style="position:absolute;top: 0;left: 4%;width: auto">
        <div class="form-inline">
            <div class="form-group m-r-sm">
                <input id="strName" name="strName" class="form-control"
                       th:value="${strName}" disabled/>
            </div>
            <div class="form-group m-r-sm">
                <label class=" control-label" for="createTimePick">查询时间：</label>
                <input readonly type="text" class="form-control input-sm mb10 data-range-pick" id="createTimePick"
                       name="createTimePick" start-element="#beginTime" end-element="#endTime" placeholder="开始时间-结束时间"
                       style="width: 377px;"/>
                <input type="hidden" th:value="*{beginTime}" id="beginTime" name="beginTime"/>
                <input type="hidden" th:value="*{endTime}" id="endTime" name="endTime"/>

            </div>
            <div class="form-group m-r-sm">
                <button type="button" th:onclick="trackShowHelper.showTrack([[${userId}]])"
                        class="btn btn-primary btn-sm m-b-none searchBtn">查询
                </button>
            </div>
        </div>
    </div>
    <!--动画按钮-->
    <div style="position:absolute;top: 0;right: 0;margin-bottom: 0;">
        <input class="btn btn-primary btn-sm m-b-none searchBtn" type="button" id="tempstop" value="暂停"/>
        <input class="btn btn-primary btn-sm m-b-none searchBtn" type="button" id="start" value="开始"/>
        <input class="btn btn-primary btn-sm m-b-none searchBtn" type="button" id="stop" value="停止"/>
        <input class="btn btn-primary btn-sm m-b-none searchBtn" type="button" id="next" value="前进"/>
        <input class="btn btn-primary btn-sm m-b-none searchBtn" type="button" id="prev" value="后退"/>
    </div>
    <!---->
    <div class="ibox float-e-margins col-sm-3" style="overflow-y: auto;max-height: 50%;position:absolute;bottom: 0;left: 0;margin-bottom: 0;">
        <div class="ibox-title">
            <h5>定位信息</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <table class="table table-striped table-bordered table-hover dataTables-example" style="padding-bottom: 0;">
                <thead>
                <tr>
                    <th>时间</th>
                    <th>楼层</th>
                    <th>定位器编号</th>
                </tr>
                </thead>
                <tbody id="table-content" style="overflow-y: auto;max-height: 50%;">

                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/html" id="table-content-template">
    <tr>
        <td>{time}</td>
        <td>{address}</td>
        <td>{no}</td>
    </tr>
</script>
<!--基础框架js-->
<script src="../../resource/js/jquery.min.js?v=2.1.4" th:src="@{/resource/js/jquery.min.js?v=2.1.4}"></script>
<script src="../../resource/js/bootstrap.min.js?v=3.3.5" th:src="@{/resource/js/bootstrap.min.js?v=3.3.5}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-utils.js?20190316}"></script>
<script src="../../resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316?1234567"
        th:src="@{/resource/hotui/js/hot/bootstrap.hot.extra-init.js?20190316(123)}"></script>
<script src="../../resource/hotui/js/content.min.js" th:src="@{/resource/hotui/js/content.min.js}"></script>

<script src="../../resource/lib/moment.min.js" th:src="@{/resource/lib/moment.min.js}"></script>
<script src="../../resource/hotui/js/plugins/datetimepick/js/daterangepicker.js"
        th:src="@{/resource/hotui/js/plugins/datetimepick/js/daterangepicker.js}"></script>

<!--表格相关js-->
<script src="../../resource/hotui/js/plugins/jeditable/jquery.jeditable.js"
        th:src="@{/resource/hotui/js/plugins/jeditable/jquery.jeditable.js}"></script>
<script src="../../resource/hotui/js/plugins/dataTables/jquery.dataTables.js"
        th:src="@{/resource/hotui/js/plugins/dataTables/jquery.dataTables.js}"></script>
<script src="../../resource/hotui/js/plugins/dataTables/dataTables.bootstrap.js"
        th:src="@{/resource/hotui/js/plugins/dataTables/dataTables.bootstrap.js}"></script>
<!--树状图相关js-->
<script src="../../resource/hotui/js/plugins/treeview/bootstrap-treeview.js"
        th:src="@{/resource/hotui/js/plugins/treeview/bootstrap-treeview.js}">
</script>
<!--地图相关js-->
<script src="../../resource/openLayers/js/ol.js" th:src="@{/resource/openLayers/js/ol.js}"></script>
<script src="../../resource/js/map/map.js" th:src="@{/resource/js/map/map.js}"></script>
<script type="text/javascript" th:inline="javascript">
    const mapBase = /*[[@{/map}]]*/  "/map";
    const path = "http://" + document.location.host;
</script>
<script type="text/javascript">

    $(function () {
        var userId = '[[${userId}]]';
        trackShowHelper.showTrack(userId);
    });

    var trackShowHelper = {
        showTrack: function (userId) {
            $.ajax({
                url: mapBase + "/track/data",//请求路径
                type: "post",//请求方式
                data: {
                    userId: userId,
                    startTime: $("#beginTime").val(),
                    endTime: $("#endTime").val(),
                },
                success: function (apiResult) {
                    if (apiResult.data.trackList.length == 0) {
                        alert("该时间段内没有该用户的轨迹");
                        return;
                    }
                    helper.initTrack(apiResult.data.trackList);
                    //拼接表格
                    var appendHtml = '';
                    $.each(apiResult.data.msgList, function (i, item) {
                        var tempHtml = $("#table-content-template").html();
                        tempHtml = tempHtml.replace(/{time}/gm, item.dateTime);
                        tempHtml = tempHtml.replace(/{address}/gm, item.address);
                        tempHtml = tempHtml.replace(/{no}/gm, item.equNo);
                        appendHtml += tempHtml;
                    });
                    $("#table-content").html(appendHtml);
                }, error: function () {

                },
                dataType: "json" //服务器响应的数据格式
            });

        }
    }

</script>
</body>
</html>
